<template>
	<view>
		<view class="green">
			<view>
				<view class="detail">
					{{item.status_detail||'测试状态'}}
				</view>
				<view class="description">
					{{item.status_description||'测试描述'}}
				</view>
			</view>
			<!-- <view class="flowbtn">
				查看服务流程
			</view> -->
		</view>

		<view class="bg1">
			<view class="bg2">
			</view>
		</view>
		<view style="background-image: linear-gradient(to bottom, #d6fcf3 15%, #F6F7FA 0);">
			<view class="middle" style="padding-top: 0;margin-top: 0;">
				<view class="middleList">
					<view class="text">服务时间</view>
					<view class="text2">{{Totime(item.appointment_time)}}</view>
				</view>
				<view class="middleList">
					<view class="text">服务地址</view>
					<view class="text2">{{item.service_detail_address}}</view>
				</view>
				<view class="middleList">
					<view class="text">被护理人信息</view>
					<view class="text2">{{item.care_name}}</view>
				</view>
				<view class="middleList2">
					<view class="text">情况描述</view>
					<view class="text2">{{item.situation_description}}</view>
				</view>
			</view>
		</view>



		<view class="middle">
			<view style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);">
				<uni-list-item :title="item.subject" :note="item.body" :thumb="item.service_pic_urls" thumb-size="lg" />
			</view>


			<view class="middleList">
				<view>套餐金额</view>
				<view class="text2">{{item.amount}}</view>
			</view>
			<view class="middleList">
				<view>护理包</view>
				<view class="text2" @click="$refs.package.open()">
					{{item.consumable_package_amount}}
					<uni-icons type="right" style="color: gray;"></uni-icons>
				</view>
			</view>
			<view class="middleList2">
				<view>需付款</view>
				<view class="text2">{{item.amount}}</view>
			</view>
		</view>
		<view class="middle">
			<view class="middleList">
				<view style="font-weight: 900;font-size: 30rpx;">就医记录</view>
			</view>
			<image :src="item.medical_record" style="height: 150rpx;width: 150rpx;margin-top: 20rpx;" mode="" @click="Preview(item.medical_record)"/>
		</view>

		<view class="middle">
			<view class="middleList">
				<view>下单编号</view>
				<view class="text2">{{item.merchant_order_id}}</view>
			</view>
			<view class="middleList">
				<view>下单时间</view>
				<view class="text2">{{ Totime(item.create_time) }}</view>
			</view>
			<!-- <view class="middleList">
				<view>支付方式</view>
				<view class="text2">123</view>
			</view> -->
			<view class="middleList2">
				<view>备注</view>
				<view class="text2">{{item.injection_consumption_bag_remark}}</view>
			</view>
		</view>
		<view style="height: 100rpx;">

		</view>

		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
				@buttonClick="buttonClick" style="margin-top: 20px;" />
		</view>

		<uni-popup ref="package" type="bottom">
			<view class="popcontent">
				<view class="til">
					<view class="til_mid">{{item.consumable_package_name}}</view>
					<view class="til_right" @click="$refs.package.close()">确定</view>
				</view>
				<view class="tip">
					<uni-icons type="info"></uni-icons>
					<view>
						若耗材包中没有您需要的材料，您可在备注中说明。
					</view>
				</view>
				<view class="table">
					<view>耗材</view>
					<view>数量</view>
				</view>
				
				<view class="tablecon" v-for="(items,index) in item.consumable_package_content" :key="index">
					<view>{{items.name}}</view>
					<view>x{{items.num}}</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import requestHttp from '@/providers/essential/httpService.js'
	export default {
		
		data() {
			return {
				options: [{
					icon: 'headphones',
					text: '客服',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5",
					type: 'contact'
				}, {
					icon: 'vip',
					text: '售后',
					type: 'contact'
				}],
				customButtonGroup1: [{
					text: '立即支付',
					backgroundColor: 'linear-gradient(90deg, #0ABA94, #0ABA94)',
					color: '#fff'
				}],
				item: {}
			}
		},
		onLoad(e) {
			if (e.item) {
				requestHttp.getData('/magic/web/app/pay/order/reservation/get/'+e.item, {
					id: e.item,
				}).then((res) => {
					console.log(res)
					this.item=res.data[0]
					this.item.consumable_package_content=JSON.parse(this.item.consumable_package_content)
					
					switch (this.item.status) {
						case 0:
							this.item.status_detail = '待支付'
							this.item.status_description = '您还没有支付哦'
							break
						case 1:
							this.item.status_detail = '待商家接单中'
							this.item.status_description = '商家接单前您可以直接取消'
							this.$set(this.customButtonGroup1[0], 'text', '取消订单')
							break
						case 2:
							this.item.status_detail = '服务中'
							this.item.status_description = ''
							this.$set(this.customButtonGroup1[0], 'text', '取消订单')
							break
						case 3:
							this.item.status_detail = '服务完成'
							this.item.status_description = ''
							this.$set(this.customButtonGroup1[0], 'text', '评价')
							break
						case 4:
							this.item.status_detail = '订单已取消'
							this.item.status_description = ''
							this.$set(this.customButtonGroup1[0], 'text', '查看服务')
							break
						case 5:
							this.item.status_detail = '订单取消中'
							this.item.status_description = '待商家处理'
							this.$set(this.customButtonGroup1[0], 'text', '催促处理')
							break
						default:
							uni.navigateBack()
					}
				})
			}

		},
		methods: {
			Totime(e){
				const date = new Date(e);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 注意：月份从0开始，所以需要加1
				const day = date.getDate();
				const hour = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();
				const formattedDateTime = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
				return formattedDateTime
			},
			Preview(e){
				uni.previewImage({
					urls:e
				})
			},
			onClick(e) {
				console.log(e)
			},
			buttonClick(e) {
				console.log(e.content)
				let odstatus = 4
				if (this.item.status == 2) {
					odstatus = 5
				}
				switch (e.content.text) {
					case '取消订单':
						requestHttp.postData('/magic/web/app/pay/order/reservation/update/status', {
							id: this.item.id,
							orderStatus: odstatus
						}).then((res) => {
							uni.reLaunch({
								url: '/pages/accompany-tmp/order/order'
							})
						})
						break;
					case '评价':
						uni.navigateTo({
							url: '/pagesA/orderDetail/comment'
						})
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style scoped>
	.popcontent {
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		padding: 10rpx 0 40rpx 0;

	}

	.tip {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		font-size: 20rpx;
		color: gray;
	}

	.til {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.til_right {
		flex: 20%;
		text-align: center;
		color: #0ABA94;
	}

	.til_mid {
		padding-left: 20%;
		flex: 80%;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.table {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx 10rpx 30rpx;
		border-bottom: solid 3rpx #efefef;
		font-weight: 700;
	}
	.tablecon{
		font-size: 25rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx 20rpx 30rpx;
	}
	
	.green {
		background-color: #02c59d;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx 20rpx 20rpx;
		color: white;
	}

	.detail {
		font-size: 40rpx;
		font-weight: 600;

	}

	.description {
		margin-top: 5rpx;
		font-size: 20rpx;
	}

	.flowbtn {
		border: 2rpx solid white;
		font-size: 20rpx;
		padding: 10rpx;
		border-radius: 5000rpx;
	}

	.bg1 {
		height: 35rpx;
		background: #02c59d;
		width: 100%;
	}

	.bg2 {
		height: 35rpx;
		background: #d6fcf3;
		border-radius: 50px 50px 0px 0px;
		width: 100%;
	}

	.middle {
		background-color: white;
		border-radius: 30rpx;
		margin: 20rpx;
		padding: 10rpx 30rpx 10rpx 30rpx;
	}

	.middleList {
		padding: 30rpx 0 30rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
	}

	.middleList2 {
		padding: 30rpx 0 30rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.text {
		font-weight: 600;
		font-size: 30rpx;
	}

	.text2 {
		color: grey;
		font-size: 30rpx;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
<style>
	page {
		height: 100%;
		background-color: #F6F7FA;
	}
</style>